<script setup>
  import * as echarts from "echarts"
  import { ref, reactive, watch, onMounted, watchEffect } from 'vue'

  const props = defineProps(['value'])

  const emit = defineEmits(['emitChartParams'])

  const unit = ref('')
  const options = reactive({
    title: {
      text: '',
      top: '0',
      left: '40px',
      show: true,
      textStyle: {
        color: '#fff'
      }
    },
    grid: {
      top: '15%',
      right: '2%',
      bottom: '20%',
      left: '2%',
    },
    legend: {},
    // 提示
    tooltip: {
      trigger: "item",
      show: true,
    },
    xAxis: {
      type: "category",
      data: [],
      axisLabel: {
        show: true,
        textStyle: {
          color: "#fff",
          fontSize: 12
        },
        // rotate: -45
      },
    },
    yAxis: {
      type: "value",
      data: [],
      name: '',
      splitLine: false,
      nameTextStyle: {
        color: "#fff",
        nameLocation: "start",
      },
      axisLabel: {
        show: false,
        textStyle: {
          color: "#fff",
          fontSize: 20
        }
      }
    },
    series: [
      {
        data: [],
        type: "bar",
        barGap: "0%",
        barWidth: 5,
        color: '#2366fc',
        itemStyle: {
          normal: {
            // color: function(params) {
            //   var colorList = [
            //     'rgb(106, 240, 177)',
            //     'rgb(9, 117, 240)',
            //     'rgb(227, 233, 240)',
            //     'rgb(247, 183, 56)',
            //     'rgb(137, 240, 106)',
            //     'rgb(245, 138, 221)',
            //     'rgb(224, 85, 85)',
            //     '#12b7ee',
            //     '#f035a5'
            //   ]; //每根柱子的颜色
              
            //   return colorList[params.dataIndex];
            // },

            // 渐变色
            color: new echarts.graphic.LinearGradient(0, 0, 0, 1,
              [
                {
                  offset: 0,
                  color: "#4af5e7" // 0% 处的颜色
                },
                {
                  offset: 1,
                  color: "#c1fdf8 " // 100% 处的颜色
                }
              ],
              false
            ),
            shadowColor: "rgba(0,160,221,1)",
            //模糊细数
            shadowBlur: 4
          }
        },
        // 标签
        label: {
          show: true,
          position: "top",
          distance: 10,
          fontSize: 12,
          color: '#fff',
          fontWeight: 500
        }
      }
    ]
  })

  watch(() => props.value, 
    (newVal, oldVal) => {
      unit.value = newVal.unit
      options.xAxis.data = newVal.x
      options.yAxis.data = newVal.y
      options.series[0].data = newVal.y

      initChart()
    },
    {
      deep: true,
      // immediate: true
    }
  )

  onMounted(() => {
    // initChart()
  })

  function initChart() {
    let chart = echarts.init(document.getElementById("zhu_zhuang_tu"));
    
    chart.on('click', params => {
      clickChart(params)
    })

    chart.setOption(options)
  }

  function clickChart(params) {
    emit('emitChartParams', params.data)
  }
</script>

<template>
  <div class="box relative">
    <div id="zhu_zhuang_tu" @click="clickChart"></div>

    <span class="unit">单位: {{ unit }}</span>
  </div>
</template>

<style scoped>
  .box {
    width: 100%;
    height: 100%;
    position: relative;
  }

  #zhu_zhuang_tu {
    width: 100%;
    height: 100%;
  }

  .unit { position: absolute; left: 10px; bottom: 0px; color: #fff; font-size: 10px; }
</style>
